<template>
	<view class="container">
		<view class="box-bg">
			<uni-nav-bar left-icon="left" height="60px" color="white" background-color="#0044cc" rightText="联系客服"
				title="运输" @clickLeft="back()" />
		</view>
		<view class="transport-main">
			<uni-steps :options="list1" active-color="white" :active="active" />
		</view>
		<uni-notice-bar color="red" background-color="#ffc6c4" show-icon text="请在倒计时结束前领取提货单,否则运单将取消" />
		<view class="countdowntime">
			<uni-countdown :show-day="false" :font-size="45" :hour="1" :minute="0" :second="0" />
		</view>
		<view class="QRcode">
			二维码放在这里
		</view>
		<view class="codetip">向工作人员出示二维码,领取提货单</view>
		<view class="function">
			<uni-grid :show-border="false" :column="4">
				<uni-grid-item v-for="(item, index) in list2" :index="index" :key="index">
					<view class="grid-item-box" style="background-color: #fff;" @click="chooseClick(item,index)">
						<uni-icons :type="item.icontype" :size="35" color="#777" />
						<text class="function-text">{{item.icontext}}</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view>
		<view class="carInfo">
			<view>
				<image class="swiper-img" :src="carInfoImg"></image>
			</view>
			<view class="car-transport-info">
				<text class="carNum">晋A00001</text><br />
				<text class="huowuInfo">货物名称:直采-zzt5000</text>
			</view>
		</view>
		<view class="load-location">
			<view class="load-car">
				<image class="load-car-img" src="../../static/img/transport/load.png"></image>
				<text class="load-title">gg-侯村乡龙角山龙城森林公园</text><br />
				<text class="load-text">山西省太原市阳曲县侯村乡龙城森岭公园</text>
			</view>
			<view class="unload-car">
				<image class="load-car-img" src="../../static/img/transport/unload.png"></image>
				<text class="load-title">郭志华-龙城公园</text><br />
				<text class="load-text">山西省太原市杏花岭区中间涧河镇232县道龙城公园</text>
			</view>
		</view>
		<button type="primary" size="mini" @click="nextTransport()">已扫描二维码</button>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				type: 'center',
				msgType: 'success',
				carInfoImg: "../../static/img/transport/carInfo.png",
				active: 1,
				list1: [{
					title: '已抢单'
				}, {
					title: '待领票'
				}, {
					title: '待到矿'
				}, {
					title: '待装车'
				}, {
					title: '待卸车'
				}],
				list2: [{
					icontype: 'wallet',
					icontext: '联系开票',
					url: '/pages/transport/exceptional'
				}, {
					icontype: 'info',
					icontext: '异常上报',
					url: '/pages/transport/exceptional'
				}, {
					icontype: 'close',
					icontext: '取消运单',
					url: '/pages/transport/cancelorder'
				}, {
					icontype: 'search',
					icontext: '查看详情',
					url: '/pages/transport/selectdetails'
				}]
			}
		},
		methods: {
			dialogToggle(type) {
				this.msgType = type
				this.$refs.alertDialog.open()
			},
			back() {
				uni.switchTab({
					url: "/pages/transport/transport"
				})
			},
			nextTransport() {
				console.log(11111)
				uni.navigateTo({
					url: "/pages/transport/transport3"
				})
			},
			chooseClick(item, index) {
				console.log(index)
				if (index == 1) {
					uni.navigateTo({
						url: `${item.url}`
					})
				}
				if (index == 2) {
					uni.showModal({
						// 提示文字
						content: '确定要取消运单吗？',
						// 取消按钮的文字自定义
						cancelText: "暂不",
						// 确认按钮的文字自定义
						confirmText: "确定",
						//删除字体的颜色
						confirmColor: 'blue',
						//取消字体的颜色
						cancelColor: '#000000',
						success: function(res) {
							if (res.confirm) {
								uni.navigateTo({
									url: `${item.url}`
								})
							} else {
								// 执行取消后的操作
							}
						}
					})
				}
				if (index == 3) {
					uni.navigateTo({
						url: `${item.url}`
					})
				}
			}
		}
	}
</script>

<style>
	.transport-main {
		background-color: #0044cc;
		padding: 15px 10px;
	}

	.countdowntime {
		width: 220px;
		font-weight: bold;
		margin: 20px auto;
	}

	.QRcode {
		width: 200px;
		height: 200px;
		background-color: red;
		margin: 0px auto;
	}

	.codetip {
		width: 250px;
		color: #848a89;
		margin: 15px auto;
		font-size: 16px;
	}

	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0px 5px;
	}

	.function {
		height: 120px;
	}

	.function-text {
		font-size: 14px;
		margin-top: 10px;
		color: #848a89;
	}

	.carInfo {
		width: 300px;
		height: 50px;
		background-color: #e6ebeb;
		margin: 0px auto;
		border-radius: 50px;
	}

	.swiper-img {
		width: 45px;
		height: 40px;
		float: left;
		margin: 5px 0 5px 5px;
		border-radius: 50%;
	}

	.carNum {
		margin-left: 10px;
		font-size: 16px;
		font-weight: bold;
	}

	.huowuInfo {
		margin-left: 10px;
		color: #878787;
	}

	.car-transport-info {
		padding: 5px 0px 0px 20px;
	}

	.load-location {
		margin: 25px 0px 0px 20px;
	}

	.load-car-img {
		width: 25px;
		height: 25px;
		float: left;
		margin: 5px;
	}

	.load-car {
		margin-bottom: 10px;
	}

	.load-title {
		width: 400rpx;
		font-size: 16px;
		font-weight: bold;
		/*第一步： 溢出隐藏 */
		overflow: hidden;
		/* 第二步：让文本不会换行， 在同一行继续 */
		white-space: nowrap;
		/* 第三步：用省略号来代表未显示完的文本 */
		text-overflow: ellipsis;
	}

	.load-text {
		width: 400rpx;
		color: #878787;
		/*第一步： 溢出隐藏 */
		overflow: hidden;
		/* 第二步：让文本不会换行， 在同一行继续 */
		white-space: nowrap;
		/* 第三步：用省略号来代表未显示完的文本 */
		text-overflow: ellipsis;
	}
</style>